<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head/>
    <h:body>
        <p:panelGrid columns="1">
            <h:panelGroup>
                <h3 style="margin-top: 0">Input Text Slider</h3>
                <h:panelGrid columns="1" style="margin-bottom: 10px">
                    <p:inputText id="txt1" value="#{sliderBean.number1}" />
                    <p:slider for="txt1" />
                </h:panelGrid>
            </h:panelGroup>
            <h:panelGroup>
                <h3>Hidden Input Slider with Display Value</h3>
                <h:panelGrid columns="1" style="margin-bottom: 10px">
                    <h:outputText id="output" value="Set ratio to %#{sliderBean.number2}" />
                    <h:inputHidden id="txt2" value="#{sliderBean.number2}" />
                    <p:slider for="txt2" display="output" style="width: 200px" displayTemplate="Set ratio to %{value}" />
                </h:panelGrid>
            </h:panelGroup>
            <h:panelGroup>
                <h3>Range Slider</h3>
                <h:panelGrid columns="1" style="margin-bottom: 10px">
                    <h:outputText id="displayRange" value="Between #{sliderBean.number6} and #{sliderBean.number7}" />
                    <p:slider for="txt6,txt7" display="displayRange" style="width: 400px" range="true" displayTemplate="Between {min} and {max}" />
                </h:panelGrid>
                <h:inputHidden id="txt6" value="#{sliderBean.number6}" />
                <h:inputHidden id="txt7" value="#{sliderBean.number7}" />
            </h:panelGroup>
        </p:panelGrid>
    </h:body>
</html>
